<template>
	<view class="">
		<view class="cost" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
			<view class="cost_status" v-if="item.check_status == 0"><span>待审核</span></view>
			<view class="cost_status" v-if="item.check_status == 1"><span>审核中</span></view>
			<view class="cost_status" v-if="item.check_status == 2"><span>审核通过</span></view>
			<view class="cost_status" v-if="item.check_status == 3"><span>审核未通过</span></view>
			<view class="cost_status" v-if="item.check_status == 4"><span>撤销</span></view>
			<view class="cost_type">{{item.num}}</view>
			<view class="cost_info">
				<view class="cost_left">
					<view class="cost_text">关联客户：{{item.customer?item.customer.name:''}}</view>
					<view class="cost_text">联系人：{{item.contacts?item.contacts.name:''}}</view>
					<view class="cost_text">发货仓库：{{item.warehouse?item.warehouse.name:''}}</view>
					<view class="cost_text">导出次数：{{item.export_number?item.export_number:0}}</view>
				</view>
				<view class="cost_right">
					<image :src="item.owner_staff.img?item.owner_staff.img:BASE_IMG_URL+'headImg.png'" class="staffimg" mode=""></image>
					<view class="staffname">{{item.owner_staff.name}}</view>
				</view>
			</view>
		</view>
		<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/util/api.js'
	
	export default{
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		data() {
			return{
				BASE_IMG_URL:BASE_IMG_URL
			}
		},
		methods:{
			toDetail(item) {
				uni.navigateTo({
					url:'/pagesB/invoice/detail?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cost{
		width:690rpx;
		margin:0 auto 24rpx;
		background:#fff;
		border-radius: 20rpx;
		padding:30rpx;
		position: relative;
		.cost_type{
			font-size:28rpx;
			color:#333;
			padding-bottom:15rpx;
			border-bottom:1rpx solid #f5f5f5;
		}
		.cost_status{
			position: absolute;
			right:24rpx;
			top:24rpx;
			background:$uni-text-color-opcity;
			border-radius: 5rpx;
			font-size: 26rpx;
			color: $uni-color-primary;
			padding: 5rpx 12rpx;
		}
		.cost_info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:10rpx;
			.cost_left{
				.cost_text{
					font-size:24rpx;
					color:#999;
					margin-bottom:10rpx;
				}
			}
			.cost_right{
				display: flex;
				flex-direction: column;
				align-items: center;
				.staffimg{
					width:80rpx;
					height:80rpx;
					border-radius: 50%;
					margin-bottom:8rpx;
				}
				.staffname{
					font-size:24rpx;
					color:#999;
				}
			}
		}
	}
</style>